<template>
    <div class="home">
        <van-search v-model="search" placeholder="请输入搜索关键词" />
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in swiperImages" :key="image">
                <van-image fit="fill" :src="image" />
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="5" :gutter="5">
            <van-grid-item v-for="(value, i) in gridLabels" :icon="`/src/assets/icons/menu${i + 1}.png`" :key="value"
                :text="value">
            </van-grid-item>
        </van-grid>
        <div class="product">
            <div class="product_item" v-for="(item, index) in products" :key="index">
                <van-tag type="danger" size="large">{{ item }}</van-tag>
                <van-image :src="`/src/assets/images/product${index + 1}.png`"></van-image>
            </div>
        </div>
        <div class="new">
            <h3>每周上新</h3>
            <div class="new_list">
                <div class="new_list_item" v-for="(item, index) in newList" :key="index">
                    <van-image :src="`/src/assets/images/new${index + 1}.jpg`"></van-image>
                    <p>{{ item.name }}</p>
                    <p class="price">￥{{ item.price }}</p>
                </div>
            </div>
        </div>
        <div class="top">
            <h3>人气推荐</h3>
            <div class="top_list">
                <div class="top_list_item" v-for="(item, index) in topList" :key="index">
                    <van-card :tag="`TOP${index + 1}`" :price="item.price" :desc="item.desc" :title="item.title"
                        :thumb="`/src/assets/images/top${index + 1}.jpg`" :origin-price="item.originPrice" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
const search = ref("");
const swiperImages = ["/src/assets/images/banner1.jpg", "/src/assets/images/banner2.jpg"];
const gridLabels = ref([
    "今日爆款",
    "好物分享",
    "推荐购买",
    "购物心得",
    "直播专区",
    "签到中心",
    "值得购买",
    "每日优惠",
    "充值中心",
    "我的客服",
]);
const products = ["直播", "推荐", "补贴", "分享"];
const newList = [
    { name: "懒人小沙发", price: "128.00" },
    { name: "减压弹力球", price: "89.00" },
    { name: "简约一字夹发夹", price: "12.8" },
    { name: "毛线小兔子耳朵发夹", price: "9.9" },
];
const topList = [
    {
        title: "蚕丝被 正品桑蚕丝",
        desc: "一级桑蚕丝，轻盈、透气、柔软",
        price: "299.00",
    },
    {
        title: "儿童摇摇马",
        desc: "安全、不会侧翻、爸妈放心",
        price: "88.00",
        originPrice: "98.00",
    },
    {
        title: "可躺可睡休闲懒人沙发",
        desc: "轻松看书、社交、办公、舒适放松",
        price: "128.00",
        originPrice: "168.00",
    },
    {
        title: "儿童积木 拼装玩具",
        desc: "大颗粒 家长更放心 不易吞咽、不易破坏",
        price: "199.00",
        originPrice: "205.00",
    },
    {
        title: "扭扭车 1————3岁男女宝宝",
        desc: "儿童扭扭车万向轮 防侧翻大人新的",
        price: "89.00",
        originPrice: "99.00",
    },
];
</script>
<style scoped>
.swipe .van-swipe-item img {
    width: 100%;
}

.product,
.new_list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.product .product_item,
.new_list_item {
    flex: 0 0 calc(50% - 5px);
    position: relative;
}

.product_item .van-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

h3 {
    text-align: center;
    margin-bottom: 20px;
}

.new_list_item {
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.price {
    color: #ee0a24;
}
</style>
